<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<html>
<head>
<base href="<%=basePath%>" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>发布彩信</title>
<script type='text/javascript' src='js/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='js/jquery.validate.min.js'></script>
<script type='text/javascript' src='js/common.js'></script>
<script type='text/javascript' src='dwr/engine.js'></script>
 <script type='text/javascript' src='dwr/util.js'></script>
 <script type='text/javascript' src='dwr/interface/bisGroupService.js'></script>
<script type='text/javascript' src='js/jquery-ui-1.7.3.custom.min.js'></script>  
 <link href="style/ui-lightness/jquery-ui-1.7.3.custom.css" rel="stylesheet" type="text/css">
<link href="manage/manage.css" rel="stylesheet" type="text/css">
<link href="style/css.css"  rel="stylesheet" type="text/css" />
<script type="text/javascript"> 
	//上一帧
   function preZhen() 
   {
	   var n = parseInt($("#zhenNumber").val());
	   //如果不是第一帧
	   if (n != 1) {
	   		changeZhen(n - 1, n);
	   }
   }

   //下一帧
   function nextZhen() 
   {
	   var n = parseInt($("#zhenNumber").val());
	   //如果不是最后一帧
	   if (n != 4) {
	   		changeZhen(n + 1, n);
	   }
   }

   function selectZhen() {
	   changeZhen($("#zhenNumber").val(), $("#oldZhenNo").val());
   }
   
   //跳到某个帧
   function changeZhen(zhenNumber, oldZhenNo) 
   {
	   $("#zhenNumber").val(zhenNumber);
	   $("#addForm").attr("action" , "mobanEditAction!changeZhen.action?oldZhenNo=" + oldZhenNo);
	   $("#addForm").submit();
	   
   }

   function cleanZhen() {
	   $("#addForm").attr("action" , "mobanEditAction!cleanCurZhen.action");
	   $("#addForm").submit();
   }

   function initTable() 
   {
	   //一开始显示第一帧
	   $(".table1").show();
	   $(".table2").hide();
	   $(".table3").hide();
	   $(".table4").hide();
   }

   function changeType() {
	   var t = $("#bisType").val();
	   bisGroupService.findGroupsByType(t, changeTypeHandler);
   }

   function changeTypeHandler(data) {
	   DWRUtil.removeAllOptions("bisGroup");
	   DWRUtil.addOptions("bisGroup", data, "id", "name"); 
   }

   function uploadPic() {
	   if ($("#pic1").val() == "") {
		   $("#formError").text("请选中你要上传的图片文件");
		   return;
	   } else {
		   var pname = $("#pic1").val().toLowerCase();
		   var dotIndex = pname.lastIndexOf(".");
		   if (pname.lastIndexOf(".gif", dotIndex)==-1 && pname.lastIndexOf(".jpg", dotIndex)==-1) {
			   $("#formError").text("图片的格式有误,请重新选择");
			   return;   
		   }
		   
	   }
	   $("#addForm").attr("action" , "mobanEditAction!uploadPic.action");
	   $("#addForm").submit();
   }

   function cleanPic() {
	   $("#addForm").attr("action" , "mobanEditAction!cleanPic.action");
	   $("#addForm").submit();
   }

   function uploadMusic() {
	   if ($("#music1").val() == "") {
		   $("#formError").text("请选中你要上传的音乐文件");
		   return;
	   } else {
		   var pname = $("#music1").val().toLowerCase();
		   var dotIndex = pname.lastIndexOf(".");
		   if (pname.lastIndexOf(".mid", dotIndex)==-1) {
			   $("#formError").text("图片的格式有误,请重新选择");
			   return;   
		   }
		   
	   }
	   $("#addForm").attr("action" , "mobanEditAction!uploadMusic.action");
	   $("#addForm").submit();
   }

   function cleanMusic() {
	   $("#addForm").attr("action" , "mobanEditAction!cleanMusic.action");
	   $("#addForm").submit();
   }

   function uploadTxt() {
	   if ($("#txt1").val() == "") {
		   $("#formError").text("请选中你要上传的文字文件");
		   return;
	   } else {
		   var pname = $("#txt1").val().toLowerCase();
		   var dotIndex = pname.lastIndexOf(".");
		   if (pname.lastIndexOf(".txt", dotIndex)==-1) {
			   $("#formError").text("文件的格式有误,请重新选择");
			   return;   
		   }
		   
	   }
	   $("#addForm").attr("action" , "mobanEditAction!uploadTxt.action");
	   $("#addForm").submit();
   }

   function cleanTxt() {
	   $("#addForm").attr("action" , "mobanEditAction!cleanTxt.action");
	   $("#addForm").submit();
   }

   function saveMobanAll() {
	   if ($.trim($("#mobanTitle").val()) == "") {
		   $("#formError").text("请输入彩信标题");
		   return;
	   }
	   $("#addForm").submit();
   }

  
   function init() {
	   var dialogOpts = {
		 	   title:"编辑彩信文字",
		 	  draggable:false,
		 	 resizable:false,
		 	 width: 350,
		 	autoOpen: false,
	 		   buttons: {
	 		      "Ok": function() {
				 		if ($("#editTxtContent").val().length > 50000) {
					    	$("#editTxtError").text("你输入的文字大多，已经超多了50000B");
					    	return false;
				    	}
				    	if ($.trim($("#editTxtContent").val()) == "") {
				    		$("#editTxtError").text("请输入彩信文字");
					    	return false;
				    	}
				    	$("#editTxtContent2").val($("#editTxtContent").val());
				    	$("#addForm").attr("action" , "mobanEditAction!editTxt.action?zhenNumber=" + $("#zhenNumber").val());
				    	$("#addForm").submit();
			       } 
	 		   }
	 		};
	 	$("#editTxtDiv").dialog(dialogOpts);
	   	 $("#yulanDiv").dialog({title:"彩信预览", resizable:false,  width: 900,autoOpen: false});
   }
     //编辑彩信文字
   function editTxt() {
	   $("#editTxtDiv").dialog('open');
   }

   function yulanMsg() {
	   $("#yulanDiv").dialog("open");
   }
</script>
<style type="text/css">
table tr td {font-size:12px;}
.formtable tr {
	height: 30px;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
.pic {
	max-height: 153px;   
   _height:expression(this.height >153?"153px":this.height);   
   overflow-y:auto;
}
</style>
</head>
<body style="margin:0px; text-align:center;font-size:12px;" bgcolor="#F1F1F1">
<div id="top">
 	<!-- 头部-->
 	<%@include file="mainTop.jsp"%>
</div>
<div id="top2"></div>
<!-- 中间-->
<div id="main1">
<!-- 左边-->
<%@include file="mainLeft.jsp"%>
 <div class="mainr2">
<table width="789" height="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#F1F1F1">

 <tr>
    <td height="500" align="left" valign="top" s>
	<table width="788" height="70" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid #DBDBDB; border-left:1px solid #DBDBDB;  " >
      <tr style="font-size:12px">
        <td width="112" height="22" align="center" bgcolor="#FFFFFF" style="border-top:1px solid #DBDBDB; border-right:1px solid #DBDBDB;" >模板列表</td>
        <td width="7" style="border-bottom:1px solid #DBDBDB;">&nbsp;</td>
        
        <td width="110" align="center"   background="images/line3.jpg" style="border:1px solid #DBDBDB;"><a href="mobanAction!addMoban.action?first=1">新建模块</a></td>
        <td width="7" style="border-bottom:1px solid #DBDBDB;">&nbsp;</td>
        
		 	<td width="112" height="22" align="center"  background="images/line3.jpg" style="border:1px solid #DBDBDB;"><a href="bisType!allBisTypeListByName.action">模块分类</a></td>
        <td width="8" style="border-bottom:1px solid #DBDBDB;">&nbsp;</td>
        
        
    <td width="110" align="center" background="images/line3.jpg"  style="border:1px solid #DBDBDB;"><a href="bisGroup!allBisGroupListByName.action">模块分组</a></td>
    <td width="8" style="border-bottom:1px solid #DBDBDB;">&nbsp;</td>
    
    <td width="112" height="22" align="center"  background="images/line3.jpg" style="border:1px solid #DBDBDB;"><a href="bisType!allBisTypeListByName.action">还可能发送</a></td>
        <td width="250px;" style="border-bottom:1px solid #DBDBDB;">&nbsp;</td>
      </tr>
	  
      <tr>
        <td height="47" colspan="10" align="center" valign="top" style="border-right:1px solid #FFFFFF">
		<table width="780" height="42" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="font-size:12px">
          <tr  align="left">
            <td height="42"  valign="middle" class="STYLE20">
				
				<table>
					<tr height="30px">
						<td></td>
						<td align="center">&nbsp;
						
						<div id="formError" style="color: red;"></div>
						</td>
					</tr>
					<tr>
						<!-- 左右的预览 -->
						<td valign="top">
							<table cellspacing="0" cellpadding="0" border="0" width="216" height="424">
					        <tbody><tr>
					          <td align="center" width="216" valign="top" height="424"><table cellspacing="0" cellpadding="0" border="0" width="206" height="424">
					            <tbody><tr>
					              <td height="55" colspan="3"><img width="217" height="75" src="images/z_top.jpg"></td>
					            </tr>
					            <tr>
					              <td width="19" height="273"><img width="18" height="275" src="images/z_left.jpg"></td>
					              <td width="182" valign="top"><table cellspacing="0" cellpadding="0" border="0" align="center" width="181" style="border:1px solid #E6E6E6;">
					                  <tbody><tr>
					                    <td width="185" height="140">
					                    	<!-- 彩信图片 -->
					                    	<s:if test="curMsgDetail==null || curMsgDetail.pic==null">
					                    		<img width="181" height="153" src="images/zlzjpg.jpg">
					                    	</s:if>
					                    	<s:else>
					                    		 <img class="pic" src="<s:property value="curMsgDetail.pic"/>"> 
					                    	</s:else>
					                    </td>
					                  </tr>
					                  <tr>
					                    <td height="117">
					                    <s:if test="curMsgDetail==null || curMsgDetail.txt == null || curMsgDetail.txt==''">
				                    		<textarea  readonly="readonly" style="border:0px; height:115px;  width:181px; color:#000000;" cols="30" name="grjj">彩信文字内容</textarea>
				                    	</s:if>
				                    	<s:else>
						                    <textarea   readonly="readonly" style="border:0px; height:115px;  width:181px; color:#000000;" cols="30" name="grjj"><s:property value="curMsgDetail.txt"/></textarea>
					                    </s:else>
					                    
						          </td>
					                  </tr>
					              </tbody></table></td>
					              <td width="16"><img width="16" height="275" src="images/z_right.jpg"></td>
					            </tr>
					            <tr>
					              <td height="74" colspan="3"><img width="217" height="74" src="images/z_end.jpg"></td>
					            </tr>
					          </tbody></table></td>
					        </tr>
					      </tbody></table>
							
													
						</td>
						
						<!-- 右边的form -->
						<td>
							<s:form name="addForm" id="addForm" action="mobanEditAction!saveMoban.action" enctype="multipart/form-data" method="post">
							<input type="hidden" id="editTxtContent2"  name="editTxtContent" />
							<table width="100%"  class="formtable"  border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="font-size:12px">
								<tr style="height: 35px;">
									<td align="right">彩信标题：</td>
									<td> <s:textfield size="20" maxlength="25" id="mobanTitle" value="%{#session.editMsg.title}" name="title"></s:textfield> </td>
								</tr>
								<tr>
									<td align="right">彩信帧控制：</td>
									<td nowrap="nowrap">
										<input id="oldZhenNo" type="hidden" value="<s:property value="zhenNumber" />"/>
										<input type="button" value="上一帧" onclick="preZhen();"/>
										<input type="button" value="下一帧"  onclick="nextZhen();"/>
										第<s:select name="zhenNumber"
											onchange="selectZhen();" id="zhenNumber"
											list="#{1:1,2:2,3:3,4:4}" ></s:select>
										帧
										<input type="button" value="清除本帧" onclick="cleanZhen();"/>
									</td>
								</tr>
								<!-- 要根据帧变化 -->
										<tr class="table1">
										<td align="right">帧间时间间隔：</td>
										<td>
											<s:textfield type="text" id="interval1" value="%{#request.curMsgDetail.interval}" name="interval1" onkeypress="javscript:return event.keyCode>=48&&event.keyCode<=57" size="5" maxlength="2" ></s:textfield> 秒
										 </td>
										</tr>
										<tr class="table1">
											<td align="right" nowrap="nowrap">彩信图片(GIF(*.gif)和JPEG(*.jpg))：</td>
											<td>
												<s:file name="pic1" id="pic1"></s:file>
												<input type="button" value="上传" onclick="uploadPic();" />
												<input type="button" value="清除" onclick="cleanPic()" />
											</td>
										</tr>
										<tr class="table1">
											<td align="right">彩信文字(*.txt utf-8格式)：</td>
											<td nowrap="nowrap">
												<s:file name="txt1" id="txt1"></s:file>
												<input type="button" value="上传" onclick="uploadTxt();"/>
												<input type="button" value="清除" onclick="cleanTxt();"/>
												<input type="button" value="编辑" onclick="editTxt();" />
											</td>
										</tr>
										<tr class="table1">
											<td align="right">彩信音乐(*.mid)：</td>
											<td>
												<s:file name="music1" id="music1"></s:file>
												<input type="button" value="上传" onclick="uploadMusic();"/>
												<input type="button" value="清除" onclick="cleanMusic();"/>
											</td>
										</tr>
								<tr>
									<td align="right">彩信字节数：</td>
									<td>
										<s:property value="msgCapacity"/>B(不得大于50000B) 剩余彩信字节数<s:property value="50000 - msgCapacity"/>B
									</td>
								</tr>
								<tr>
									<td align="right"> </td>
									<td>
										 <input type="button" value="  预览  " onclick="yulanMsg();"/>
									</td>
								</tr>
								<tr>
									<td align="right">选择标签：</td>
									<td>
										<s:select name="label" id="label" value="%{#session.editMsg.label}"
											list="#{0:'无',1:'HOT',2:'NEW'}" ></s:select>
									</td>
								</tr>
								<tr>
									<td align="right">选择分类：</td>
									<td>
										<s:select name="bisType" id="bisType" onchange="changeType();"
											list="allTypes" value="%{#session.editMsg.bisType.id}" listKey="id" listValue="name"></s:select>
										</select> 
									</td>
								</tr>
								<tr>
									<td align="right">选择分组：</td>
									<td>
										<s:select name="bisGroup" id="bisGroup"
											list="groups" value="%{#session.editMsg.bisGroup.id}" listKey="id" listValue="name"></s:select>
										</select> 
									</td>
								</tr>
								<tr>
									<td align="right">&nbsp;</td>
									<td>
										<b style="color: red;"> 可编辑的类型只有第一帧有效</b>
									</td>
								</tr>
								<tr style="height: 80px;">
									<td></td>
									<td nowrap="nowrap">
										<img  onclick="saveMobanAll();"  src="images/bc.jpg"   width="92" height="24" style="cursor: hand;" />
									</td>
								</tr>
								
								 <s:if test="hasErrors()">
							      	<tr>
							      	<td colspan="2" align="center">
										<div style="color: red;">
											<s:fielderror cssStyle="padding:0;margin:0;"/>
											<s:actionerror cssStyle="padding:0;margin:0;"/>
										</div>
									</td>
									</tr>
									</s:if>
									
									
									<s:if test="hasActionMessages()">
							      	<tr>
							      	<td colspan="2" align="center">
										<div  style="color: green;">
											<s:actionmessage cssStyle="padding:0;margin:0;"/>
										</div>
									</td>
									</tr>
								 </s:if>
								
								
								<tr>
									<td></td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td></td>
									<td>&nbsp;</td>
								</tr>
								<tr>
									<td></td>
									<td>&nbsp;</td>
								</tr>
							</table>
						</s:form>
						
						</td>
					</tr>
					
				</table>			 	
			
			    </td>
              </tr>
            </table>          
            </td>
        </tr>
        </table>
        
      </td>
      </tr>
      <tr>
		<td></td>
		<td>&nbsp;</td>
	</tr>
    </table> 
 </div>

</div>

<!-- 编辑彩信的div -->
<div id="editTxtDiv" style="display: none;">&nbsp;
	<textarea rows="20" cols="50"  id="editTxtContent">${curMsgDetail.txt}</textarea>
	<div style="color: red;" id="editTxtError"></div>
</div>


<!-- 预览效果的div -->
<div id="yulanDiv" style="display: none;">
	<table cellspacing="0" cellpadding="0" border="0">
		<tr>
			<s:iterator var="item" value="yulanList">
			
			<td>
				<table cellspacing="0" cellpadding="0" border="0" width="216" height="424">
					        <tbody><tr>
					          <td align="center" width="216" valign="top" height="424"><table cellspacing="0" cellpadding="0" border="0" width="206" height="424">
					            <tbody><tr>
					              <td height="55" colspan="3"><img width="217" height="75" src="images/z_top.jpg"></td>
					            </tr>
					            <tr>
					              <td width="19" height="273"><img width="18" height="275" src="images/z_left.jpg"></td>
					              <td width="182" valign="top"><table cellspacing="0" cellpadding="0" border="0" align="center" width="181"  >
					                  <tbody><tr>
					                    <td width="185" height="140">
					                    	<s:if test="#item==null || #item.pic==null">
					                    		<img width="181" height="153" src="images/zlzjpg.jpg">
					                    	</s:if>
					                    	<s:else>
					                    		<img  width="181" height="153" src="<s:property value="#item.pic"/>" />
					                    	</s:else>
					                    </td>
					                  </tr>
					                  <tr>
					                    <td height="117">
					                    <s:if test="#item==null || #item.txt == null || #item.txt==''">
				                    		<textarea style="border:0px; height:115px;  width:181px; color:#000000;"  readonly="readonly" cols="30" name="grjj">彩信文字内容</textarea>
				                    	</s:if>
				                    	<s:else>
						                    <textarea  readonly="readonly" style="border:0px; height:115px;  width:181px; color:#000000;" cols="30" name="grjj"><s:property value="#item.txt"/></textarea>
					                    </s:else>
					                    
						          </td>
					                  </tr>
					              </tbody></table></td>
					              <td width="16"><img width="16" height="275" src="images/z_right.jpg"></td>
					            </tr>
					            <tr>
					              <td height="74" colspan="3"><img width="217" height="74" src="images/z_end.jpg"></td>
					            </tr>
					          </tbody></table></td>
					        </tr>
					      </tbody>
				</table>
			</td>
			
			
			</s:iterator>
			
		</tr>
		<tr>
			<td align="center">
				第1帧
			</td>
			<td align="center">
				第2帧
			</td>
			<td align="center">
				第3帧
			</td>
			<td align="center">
				第4帧
			</td>
		</tr>
	</table>
</div>
<script type="text/javascript" defer="defer">
init();
</script>
</body>
</html>
